<template>
  <div class="careerPlan">
  <header>
    <nav class="primaryNav">
      <pageHead />
    </nav>
    <div class="logo">
      <div class="container">
        <span>生涯规划</span>
      </div>
    </div>
    <nav class="secondaryNav" :style="secondaryNavPosition">
      <div class="container">
        <ul>
          <li><router-link to="/plan">生涯规划</router-link></li>
          <li><router-link to="/class">生涯课程</router-link></li>
          <li><router-link to="/appraisal">生涯评测</router-link></li>
          <li @mouseover="showBank" @mouseout="hideBank"><router-link to="/bank">
            生涯宝库
            <i v-show="!isBankShow" class="el-icon-caret-top"></i>
            <i v-show="isBankShow" class="el-icon-caret-bottom"></i>
            <div class="bankList">
              <div class="bankBox">
                <a href=""><span class="bank" @click="jumpBank(0)">专业信息库</span></a>
                <a href=""><span class="bank" @click="jumpBank(1)">职业信息库</span></a>
                <a href=""><span class="bank" @click="jumpBank(2)">院校信息库</span></a>
              </div>
            </div>
          </router-link></li>
          <li><router-link to="/select-sub">6选3智能选科</router-link></li>
          <li><router-link to="/apply">志愿填报</router-link></li>
          <li><router-link to="/my-career">我的生涯</router-link></li>
        </ul>
      </div>
    </nav>
  </header>
  <main>
    <router-view />
  </main>
  <footer>
    <div class="container">
      <ul>
        <li><span>Copyright © 2022 www.newewt.com</span></li>
        <li
          v-for="(item,index) in bottomList"
          :key="index">
          <a href="">{{item.name}}</a>
        </li>
        <li><a href="" class="bg">浙公网安备 xxxxxxxxxxxxxxxx号</a>
        </li>
      </ul>
      <div class="img">
        <a href=""><img src="../assets/img/realname.png" alt=""></a>
        <a href=""><img src="../assets/img/canbelieve.png" alt=""></a>
      </div>
    </div>
  </footer>
  <aside>
    <div class="container">
      <div
          :style="{right: (right-75)+'px'}"
          class="siteFloorList">
        <a href=""><div class="siteFloorBox box1"></div></a>
        <a href=""><div class="siteFloorBox box2"></div></a>
        <a href=""><div class="siteFloorBox box3"></div></a>
        <a><div class="siteFloorBox box4" @click="backTop"></div></a>
      </div>
    </div>
  </aside>
  </div>
</template>

<script>
    import pageHead from './common/pageHead/pageHead.vue'  // 页头
export default {
  name: 'careerPlan',
  data() {
     return {
         secondaryNavPosition: {},  // 二级 nav 下拉定位问题
         // aside fixed 位置
         right: 0,
         // 导航下拉按钮
         isBankShow: false,
         scrollTop: 0,
         // 用户信息
         userInfo: {},
         // footer列表
         bottomList: [
             {name: '关于网站', url: '/'},
             {name: '法律声明', url: '/'},
             {name: '联系我们', url: '/'},
             {name: '打款信息', url: '/'},
             {name: '联系客服', url: '/'},
             {name: '意见反馈', url: '/'},
             {name: '浙ICP备xxxxxx号', url: '/'},
         ]
     }
  },
  components: {
      pageHead
  },
  created() {
      const width = document.body.clientWidth;
      this.right = (width - 1000) / 2;
  },
  mounted() {
      // 页面宽高改变 重新获取位置
      window.onresize = () => {
          return (() => {
              // 重新赋值最新窗口数据
              const width = document.body.clientWidth;
              this.right = (width - 1000) / 2;
          })()
      };
      // 返回顶部
      window.addEventListener('scroll', this.scrollToTop);
      this.watchPageScroll();
  },
  methods: {
      // 监听页面滚动
      watchPageScroll() {
          window.onscroll = function() {
              let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
              console.log("滚动距离" + scrollTop);
              if(scrollTop>=186) {
                  this.secondaryNavPosition= {
                      top: 0
                  }
              }else{

              }
          }
      },
      showBank() {
          this.isBankShow = true;
      },
      hideBank() {
          this.isBankShow = false;
      },
      // 跳转数据库页面
      jumpBank(id) {
          let routeUrl = this.$router.resolve({
              path: '/bank/child-bank',
              query: {
                  type: id
              }
          });
          window.open(routeUrl.href, '_self');
      },
      // 返回顶部
      backTop () {
          let timer = setInterval(() => {
              let isPeed = Math.floor(- this.scrollTop / 5);
              document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop + isPeed;
              if (this.scrollTop === 0) {
                  clearInterval(timer)
              }
          }, 10)
      },
      scrollToTop () {
          let top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          this.scrollTop = top;
      },
  }
}
</script>
<style lang="scss">
  @import '../styles/common.scss';
  @import '../styles/careerPlan.scss';
</style>
